<!--我的钱包-币详情-->
<template>
  <div class="all bg1">
    <template v-if="datas">

      <!--头视图-->
      <div class="head bg2">
        <div class="row acenter">
          <text class="font28 text2">{{T('提现权益')+'：'+equity}}</text>
        </div>
      </div>

      <!--资产列表-->
      <div class="row acenter jbetween">
        <VTitle class="title" :title="T('资产明细')"></VTitle>
        <div class="type bk4" @click="isType=true">
          <text class="font26 text2">{{type}}</text>
          <LImage class="img-arrow-type" :src="Config.img('v2_sanjiao_xia_bai.png')"></LImage>
        </div>
      </div>
      <div class="all">
        <VTips v-if="!datas.length"></VTips>
        <list class="list" :loadmoreoffset="50" @loadmore="httpsCoinLoading()">
          <!--刷新-->
          <refresh @refresh="httpsCoins" :display="isRefresh ? 'show' : 'hide'">
            <loading-indicator class="load text1"></loading-indicator>
          </refresh>

          <cell v-for="(item, index) in datas" v-bind:key="index">
            <div class="cell" @click="infoClick(item)">
              <div>
                <text class="font32 text2">{{item.amount}}</text>
                <div class="height10"></div>
                <text class="font24 text3">{{item.createTime}}</text>
              </div>

              <div class="all"></div>
              <text class="font32 text2">{{item.billName}}</text>              
              <LImage class="img-arrow" v-if="item.isDetail" :src="Config.img('jiantou_lan.png')"></LImage>

              <div class="line line1"></div>
            </div>

            <!-- 无更多数据 -->
            <div class="genduo" v-if="pageMax && (index == datas.length - 1)">
              <text class="font22 text3">{{T('没有更多数据')}}</text>
            </div>
          </cell>
        </list>
      </div>

      <!--类型筛选弹窗-->
      <template v-if="isType">
        <div class="dialog" @click="isType=false">
          <div class="type-size">
            <LImage class="dialog-jiao" :src="Config.img('function-sanjiao.png')"></LImage>
            <div class="type-content bg3">
              <div v-for="(items, index) in types" v-bind:key="'column'+index">
                <div class="type-cell" v-for="(item, index) in items" v-bind:key="'row'+index" @click="typeClick(item)">
                  <text class="font30 text2">{{T(item)}}</text>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </template>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>

/*************************** 头视图*/
.head {
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  padding: 40px;
  margin-bottom: 40px;
}
.text-up8{
  margin-bottom: 8px;
}

/*************************** 列表*/
.title {
  margin-left: 40px;
}
.type {
  flex-direction: row;
  align-items: center;
  height: 48px;
  border-radius: 8px;
  border-width: 2px;

  padding-left: 20px;
  padding-right: 20px;

  margin-right: 40px;
}
.list {
  flex: 1;
  margin-top: 10px;
}
.cell {
  flex-direction: row;
  align-items: center;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 30px;
  padding-bottom: 30px;
}
.line {
  position: absolute;
  height: 1px;
  left: 0;
  right: 0;
  bottom: 0;
}
.img-arrow-type{
  width:20px;
  height:12px;
  margin-left: 10px;
}
.img-arrow {
  width: 14px;
  height: 23px;
  margin-left: 20px;
}

/*************************** 加载更多*/
.load {
  height: 40px;
  width: 40px;

  margin-top: 20px;
  margin-left: 355px;
}
.genduo {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 750px;
  height: 100px;
}

/*************************** 类型*/
.dialog{
  position: absolute;
  top:0;
  right: 0;
  bottom:0;
  left:0;
}
.type-size {
  position: absolute;
  align-items: flex-end;
  top: 220px;
  right: 40px;
}
.dialog-jiao {
  width: 28px;
  height: 20px;
  margin-right: 40px;
}
.type-content{
  flex-direction: row;
  border-radius:12px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.type-cell {
  justify-content: center;
  align-items: center;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
  padding-bottom: 20px;
}

</style>

<script>

//组件
import VTitle from '@/wallet/view/VTitle.vue';  //标题
import VTips from '@/_public/VTips.vue';  //标题

//功能
import jnavigator from "@/_js/navigator";
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import jconfig from "@/_js/config";
import jhttps from "@/_js/https";
import jtime from "@/_js/time";

const weexFunction = weex.requireModule("WeexFunction");
const globalEvent = weex.requireModule('globalEvent');

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('提现权益'));

export default {
  
  components: {
    VTitle,
    VTips,
  },

  data() {
    return {
      T:T,
      Config:jconfig,

      unit:'', // 计价单位值
      coinType:'', //币类型
      wallet:undefined, //consumeWallet(消费钱包) incomeWallet(收益钱包) depositWallet(保证金钱包)

      equity:undefined, //权益
      datas:undefined, //记录

      isType:false, //true显示类型筛选
      type:'全部',
      types:[['全部','兑换','支出','提现','划转'],
             ['奖励','收入','充值','内部转账','其他']],

      typex:{'全部':'','奖励':'REWARD','兑换':'CONVERT','收入':'INCOME','支出':'CONSUME','充值':'RECHARGE','提现':'GET_CASH','内部转账':'INNER_TRANSFER','划转':'TRANSFER','其他':'OTHER'},


      pageNo:0, //页码
      pageMax:false, //turn最大页面
      isRefresh:false, //显示刷新
      isLoadinging:false, //显示加载
    };
  },

  created() {

    var param = weex.config;
    weexFunction.setTitle(param.coinType);

    this.unit = param.unit;
    this.coinType = param.coinType;
    this.wallet = param.wallet;

    this.httpsCoins();
  },

  methods: {

    initData(datas){
      for (let index = 0; index < datas.length; index++) {
        var data = datas[index];
        data.createTime = jtime.getTime(data.createTime, 'y/M/d H:m');
        data.amount = (data.type == 'expense' ? '-' : '+') + data.amount;
        data.billName = (this.wallet == 'consumeWallet' && 
                         data.operationType == 'CONVERT') ? T('余额充值') : data.billName;
      }
      return datas;
    },

    /********************************* HTTP*/
    //http币数据-刷新
    httpsCoins() {
      if (this.isRefresh || this.isLoadinging) return;
      this.isRefresh = true;

      var billType = this.typex[this.type];
      var params = {'pageNo':1, 
                    'coinType':this.coinType, 
                    'wallet':this.wallet, 
                    'billType':billType};
      jhttps.post('tradeV2/getVtnEquityBill',params,true,(data)=>{
        this.isRefresh = false;
        if (data.status == 200) {
          data = data.data;

          this.equity = data.vtnEquity; //权益
          
          var usd = jmath.cheng(this.amount, data.rate);  //折合钱
          var rate = this.unit == 'CNY' ? data.cnyUsd : '1';
          var model = jmath.cheng(usd, rate);
          this.model = jmath.gfMoney(model, false);

          this.datas = this.initData(data.vtnBillList);  //列表
          this.pageNo = 1;
          this.pageMax = this.datas.length < 20;
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http币数据-加载
    httpsCoinLoading() {
      if (this.pageMax || this.isRefresh || this.isLoadinging) return;
      this.isLoadinging = true;

      var billType = this.typex[this.type];
      var params = {'pageNo':this.pageNo+1, 
                    'coinType':this.coinType, 
                    'wallet':this.wallet, 
                    'billType':billType};
      jhttps.post('tradeV2/getVtnEquityBill',params,true,(data) => {
        this.isLoadinging = false;
        if (data.status == 200) {
          data = data.data;
          var datas = this.initData(data.vtnBillList);;
          this.datas.push(...datas);
          this.pageNo++;
          this.pageMax = datas.length < 20;
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    /********************************* 按钮点击*/
    //类型切换
    typeClick(item){
      this.isType = false;
      this.type = item;
      this.datas = [];
      this.httpsCoins();
    },

    //详情信息
    infoClick(item){
      if (!item.isDetail) return;

      var param = {'orderId':item.orderId};

      /*消费账户*/
      if(this.wallet == 'consumeWallet'){

        if(item.operationType == 'INNER_TRANSFER'){ //内部转账
          jnavigator.open('', 'wallet/WalletZzInfo', param); 
        } else if(item.operationType == 'GET_CASH'){ //提现
          jnavigator.open('', 'wallet/WalletTxInfo', param); 
        } else if(item.operationType == 'RECHARGE'){ //购买VTN
          jnavigator.open('', 'wallet/WalletBuyInfo', param);
        }
      }
      
      /*收益账户*/
      else if (this.wallet == 'incomeWallet') {

        if(item.operationType == 'CONVERT'){ //兑换
          jnavigator.open('', 'wallet/WalletDhInfo', param);
        }
      }
    },
  }
}
</script>
